<template>
	<view id="applicable-stores">
		<view class="head">
			<view class="head_one">
				<view class="head_one_l">
					<image class="location_two" src="@/static/sy/mine-detailsmine-details/location_two.png" mode="">
					</image>
					<view class="head_one_l_address ellipseHide">{{address}}</view>
				</view>
				<view class="head_one_r" @click="openLocation">重新定位</view>
			</view>
			<view class="head_two">
				<image class="shop_img" src="@/static/sy/mine-detailsmine-details/shop_img.png" mode=""></image>
				<text>附近门店</text>
				<view class="search_box">
					<image class="search_img" src="@/static/sy/mine-detailsmine-details/search.png" mode=""></image>
					<input type="text" confirm-type="search" @blur='blurInput' v-model="name" placeholder="请输入门店名称" placeholder-class="placeholder_class">
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_box" v-for="(item,index) in dataList" :key="index">
				<view class="list_box_title">
					<view class="list_box_title_l ellipseHide">{{item.name}}</view>
					<view class="list_box_title_r">距您{{item.distance}}km</view>
				</view>
				<view class="list_box_address">
					<image class="location_one" src="@/static/sy/mine-detailsmine-details/location_one.png" mode="">
					</image>
					<view class="location_txt ellipseHide">{{item.address}}</view>
					<image class="copy_img" src="@/static/sy/mine-detailsmine-details/copy_img.png" mode=""></image>
					<text class="copy_txt" @click="copy(item.address)">复制</text>
				</view>
				<view class="list_box_time">
					{{item.startTime}}~{{item.endTime}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		activityPlatformUseLs,
	} from '@/api/sy.js'
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	var QQMapWX = require('@/components/jweixin-module/jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				latitude:'',//纬度
				longitude:'',//经度
				address:'',//详细地址
				dataList:[],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				couponId:'',//优惠券id
				name:'',//店铺名称
			}
		},
		onLoad(option) {
			this.latitude = option.lat
			this.longitude = option.lnt
			this.couponId = option.couponId
			wechat.scanQRJssdk()
			qqmapsdk = new QQMapWX({
				key: 'VXOBZ-MNYL4-UXRUV-XVTEP-IE2OS-NTBUW',
				vm: this
			});
			setTimeout(()=>{
				this.getLocation()
			},200)
			this.getList()
		},
		methods: {
			getLocation() {
				console.log(545)
				let that = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: that.latitude,
						longitude: that.longitude,
					},
					success: function(res) {
						that.address = res.result.address
						// that.propShow = true
						console.log('地址：' + that.address + '、' + '定位区域编码：' + res.result
							.ad_info.adcode, res.result)
					},
					fail(res) {
						console.log('失败++++',res)
						// this.getGovAreaList()
						uni.showToast({
							icon: "none",
							title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
							duration: 2000
						})
					}
				})
			},
			openLocation() { //重新定位
				let that = this
				console.log(that.latitude,that.longitude)
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = that.latitude;
						const longitude = that.longitude;
						uni.chooseLocation({
							success: function(res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								that.address = res.address
								that.latitude = res.latitude
								that.longitude = res.longitude
								that.pageNum = 1
								that.getList()
							}
						});
					}
				});
			},
			async getList() { //获取列表
				uni.showLoading({ title:'加载中' })
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					couponId: this.couponId,
					lat: this.latitude,
					lnt: this.longitude,
					name: this.name,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				try{
					const res = await activityPlatformUseLs(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			},
			blurInput(){ //输入框失去焦点
				this.pageNum = 1
				this.getList()
			},
			copy(text) { //复制
				if(text != ''){
					var _this = this
					 _this.$copyText(text).then(
			            res => {
			              uni.showToast({
			                title: '复制成功',
			                icon: 'none'
			              })
			            }
			          )
				}
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				
			} else {
				this.pageNum++; //每触底一次 page + 1;
				this.getList()
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F7F9;
	}

	view {
		box-sizing: border-box;
	}

	.head_one {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F7FAFF;
		padding: 0 20rpx;
		height: 80rpx;
	}

	.head_one_l {
		display: flex;
		align-items: center;
	}

	.location_two {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.head_one_l_address {
		width: 500rpx;
		font-size: 30rpx;
		color: #222222;
	}

	.head_one_r {
		width: 138rpx;
		height: 52rpx;
		border-radius: 100rpx;
		border: 2rpx solid #2720DE;
		font-size: 24rpx;
		color: #2720DE;
		text-align: center;
		line-height: 48rpx;
	}

	.head_two {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #222222;
		height: 128rpx;
	}

	.shop_img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.search_box {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		background-color: #F6F6F6;
		border-radius: 100rpx;
		padding: 0 22rpx;
		height: 72rpx;
		flex: 1;
	}

	.search_img {
		width: 38rpx;
		height: 38rpx;
		margin-right: 14rpx;
	}

	.search_box input {
		flex: 1;
		font-size: 30rpx;
	}

	.placeholder_class {
		color: #C2C2C2;
	}

	.list {
		padding: 30rpx 30rpx 60rpx;
	}

	.list_box {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.list_box_title {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.list_box_title_l {
		font-size: 30rpx;
		color: #333333;
		margin-right: 16rpx;
		max-width: 506rpx;
		font-weight: bold;
	}

	.list_box_title_r {
		height: 36rpx;
		border: 2rpx solid #2720DE;
		font-size: 22rpx;
		color: #2720DE;
		border-radius: 4rpx;
		padding: 0 10rpx;
		line-height: 32rpx;
	}

	.list_box_address {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}

	.location_one {
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}

	.location_txt {
		font-size: 24rpx;
		color: #555555;
		width: 504rpx;
	}

	.copy_img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;
	}

	.copy_txt {
		font-size: 26rpx;
		color: #1053FF;
	}

	.list_box_time {
		border: 2rpx solid #CDCDCD;
		height: 46rpx;
		border-radius: 4rpx;
		text-align: center;
		line-height: 42rpx;
		padding: 0 12rpx;
		font-size: 24rpx;
		color: #333333;
		width: fit-content;
	}
</style>
